<template>
  <div class="view_page userList">
    <el-card class="box-card">
      <!--卡片头部-->
      <div slot="header" class="clearfix">
        <!--左侧-->
        <div class="left">
          <div class="back-page">
            <div class="add-back" @click="back">
              <i class="fa fa-arrow-left" aria-hidden="true"></i>
              <span>全景图详情</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 卡片内容 -->
      <div>
        <el-form :model="liveData" label-width="200px" class="inline-input">
          <el-form-item label="全景图名称">
            <el-input
              v-model="liveData.title"
              placeholder=""
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="全景图(png,jpg,jpeg)">
            <div>
              <img
                :src="cover_img"
                alt=""
                v-if="cover_img != '' && cover_img != null"
                style="width: 300px; object-fit: cover;margin-top: 5px;"
              />
            </div>
          </el-form-item>
          <el-form-item label="缩略图(png,jpg,jpeg)">
            <div>
              <img
                :src="cover_img1"
                alt=""
                v-if="cover_img1 != '' && cover_img1 != null"
                style="width: 300px; object-fit: cover;margin-top: 5px;"
              />
            </div>
          </el-form-item>
          <el-form-item label="经度">
            <el-input
              disabled
              v-model="liveData.lon"
              clearable
              placeholder="请输入经度"
            ></el-input>
          </el-form-item>
          <el-form-item label="纬度">
            <el-input
              disabled
              v-model="liveData.lat"
              clearable
              placeholder="请输入纬度"
            ></el-input>
          </el-form-item>
          <el-form-item label="拍摄高度(m)">
            <el-input
              disabled
              v-model="liveData.take_height"
              clearable
              type="number"
              placeholder="请输入拍摄高度"
            ></el-input>
          </el-form-item>
          <el-form-item label="拍摄时间">
            <el-date-picker
              disabled
              type="datetime"
              placeholder="请选择拍摄时间"
              style="width: 100%"
              v-model="liveData.shoot_time"
              @change="changeDatetime"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="选择地区">
            <el-cascader
              disabled
              class="cascader"
              v-model="selelected2"
              :options="area"
              :props="props2"
              clearable
              ref="areaRef"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="选择工程">
            <el-cascader
              disabled
              class="cascader"
              v-model="selelected"
              :options="options"
              :props="props"
              clearable
              :popper-class="'hide'"
              ref="cascade"
            ></el-cascader>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import { Message } from "element-ui";
import pagination from "@/components/common/pagination/pagination";
import devConfig from "*/dev.config";
// import Tiff from "tiff.js";

export default {
  components: {
    pagination
  },
  watch: {},
  data() {
    return {
      // userInfo_id: JSON.parse(
      //   localStorage.getItem(this.$apis.getLocalKey().loginPersonnelInformation)
      // ).data.id,
      // 筛选内容
      liveData: {
        title: "",
        file: "",
        file_thumb: "",
        river_type: "",
        river_id: "",
        river1: "",
        river2: "",
        selelected: ""
      },
      dialogVisible: false, //添加栏目弹框
      addtype: "", //类型 新增-修改
      //河流类型
      is_type: false,
      river_typeData: [
        {
          id: 1,
          name: "河流"
        },
        {
          id: 2,
          name: "水库"
        },
        {
          id: 3,
          name: "坑塘"
        }
      ],
      is_type_name: "河流名称",
      is_type_placeholder: "",

      // 选择工程
      // options: [],
      // props: {
      //   multiple: true,
      //   expandTrigger: "click"
      // },
      area: [],
      props2: {
        multiple: true,
        expandTrigger: "click"
      },
      // selelected: [],
      selelected2: [],

      //修改的id
      river_idData: [],
      // 列表的数据
      datalist: [],
      allIndex: "",
      pageNum: 1,
      page: 1,
      size: 10,
      total: 0,

      uploadUrl: this.$apis.getUploadUrl() + "/file/upload", //上传地址
      uploadData: {
        type: 1 //没用
      },
      fileList: [],
      file_id: "",
      // addtype: "",
      cover_img: "",
      cover_img1: "",
      file_suffix: "",
      fileList_sl: [],

      preValue: [],

      selelected: [],
      options: [],
      props: {
        expandTrigger: "click",
        multiple: true,
        checkStrictly: false,
        value: "value",
        label: "label"
      }
    };
  },
  created() {
    var _this = this;
    this.village_list();
    _this.getoptionsData(); //选择工程级联列表
    _this.getareaData(); //选择地区级联列表

    var alldata = JSON.parse(JSON.stringify(this.$route.query.data));
    this.liveData = alldata;
    // this.liveData = this.$route.query.data;

    // 地区级联列表回显
    let twoDArray2 = [];
    twoDArray2 = _this.liveData.json_rivers.map((item, index) => {
      return ([index] = [item.river_type, item.river_id]);
    });
    _this.selelected2 = twoDArray2;

    // 工程级联列表回显
    let twoDArray = [];
    twoDArray = _this.liveData.json_pro.map((item, index) => {
      return ([index] = [item.pro_type, item.pro_id]);
    });
    _this.selelected = twoDArray;

    this.cover_img = this.$route.query.data.url;
    this.cover_img1 = this.$route.query.data.url_thumb;
    this.file_id = this.$route.query.data.file;
    this.file_sl_id = this.$route.query.data.file_thumb;
    this.fileList = [
      {
        id: this.$route.query.data.file,
        name: this.$route.query.data.file_name,
        url: this.$route.query.data.url
      }
    ];
    this.fileList_sl = [
      {
        id: this.$route.query.data.file_thumb,
        name: this.$route.query.data.file_thumb_name,
        url: this.$route.query.data.url_thumb
      }
    ];

    // }
  },
  mounted() {},
  methods: {
    // 选择地区级联列表
    getareaData() {
      var _this = this;
      _this.$apis.unitywebpc_address_list().then(res => {
        if (res.result == 0) {
          _this.area = res.data;
        }
      });
    },
    // 选择工程级联列表
    getoptionsData() {
      var _this = this;
      _this.$apis.unitywebpc_engine_list().then(res => {
        if (res.result == 0) {
          _this.options = res.data;
        }
      });
    },
    village_list() {
      this.$apis.unitywebpc_engine_list().then(res => {
        if (res.result == 0) {
          let tt = res.data;
          this.options = tt;
        }
      });
    },
    back() {
      this.$router.back();
    }
  }
};
</script>

<style scoped>
.el-table .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal !important;
}

/*.hide {
  .el-cascader-menu:first-of-type {
    .el-cascader-node {
      .el-checkbox {
        display: none;
      }
    }
  }
}*/

.el-cascader-panel > div:first-child .el-checkbox {
  display: none;
}
</style>
<style lang="scss" scoped>
/deep/ .el-cascader__tags .el-tag .el-icon-close {
  display: none;
}
</style>
